<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="注册时间">
                <div class="block">
                    <el-date-picker
                            v-model="value2"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions">
                    </el-date-picker>

                </div>
            </el-form-item>
            <el-form-item label="好友账号">
                <el-input v-model="value1" type="text"></el-input>
            </el-form-item>
            <el-form-item label="收入类型">
                <el-select v-model="selet1" placeholder="请选择活动区域">
                    <el-option label="全部" value="1"></el-option>
                    <el-option label="收入" value="2"></el-option>
                    <el-option label="支出" value="3"></el-option>
                    <el-option label="系统" value="4"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <el-row style="margin: 10px 0 ;padding: 5px">
            <el-button type="primary" plain>佣金提现</el-button>
        </el-row>
        <el-table
                :data="tableData"
                style="width: 100%;text-align: center;height: 500px">
            <el-table-column
                    type="index"
                    width="50"
                    label="序号">

            </el-table-column>
            <el-table-column
                    :formatter="dateFormat"
                    prop="add_time"
                    label="充值时间"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="好友账号"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="pay_type"
                    label="类型"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="recharge_order_id"
                    label="当前佣金"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="amount"
                    label="佣金变化"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="cash_back"
                    label="累计佣金"
            >
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :page-sizes="[3,10,30, 200, 300, 400]"
                    :page-size="limit"
                    @current-change="current_change"
                    @size-change="handleSizeChange"
                    :total="count">
            </el-pagination>
        </div>
    </div>
</template>

<script>
  import { cash_log} from '@/api/task'
  export default {
    name: 'yongjinmingxi',
    data() {
      return {
        formInline: {
          user: '',
          region: ''
        },
        date: '1',
        count: 0,
        limit: 10,
        currentPage: 1,
        tableData: [{

        }],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        value1: '',
        value2: '',
        selet: '',
        selet1: ''

      }
    },
    created() {
      this.fetch_task(1, this.limit)
    },
    methods: {
        onSubmit(e) {
        console.log(e)
      },
        fetch_task(page, limit, where = '') {
          cash_log({ 'page': page, 'limit': limit, 'where': where = '' }).then(res => {
            this.tableData = res.data.list
            console.log(res)
            console.log(this.tableData)
          }).catch(error => {
            console.log(error)
          })
        },
        handleSizeChange(val) {
          this.limit = val
          this.fetch_task(1, this.limit)
          console.log(this.limit)
        },
        current_change: function(currentPage) {
          this.fetch_task(currentPage, this.limit)
        },
        dateFormat: function(row, column) {
          var timeStamp = row[column.property]
          if (timeStamp == undefined) {
            return ''
          }
          var date = new Date()
          date.setTime(timeStamp * 1000)
          var y = date.getFullYear()
          var m = date.getMonth() + 1
          m = m < 10 ? ('0' + m) : m
          var d = date.getDate()
          d = d < 10 ? ('0' + d) : d
          var h = date.getHours()
          h = h < 10 ? ('0' + h) : h
          var minute = date.getMinutes()
          var second = date.getSeconds()
          minute = minute < 10 ? ('0' + minute) : minute
          second = second < 10 ? ('0' + second) : second
          return y + '-' + m + '-' + d
        }

    }
  }
</script>

<style scoped>

</style>
